<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
    <style>
        .box{
            width: 400px;
            display: flex;
            flex-flow: row nowrap;
        }
        .box .item{
            flex-grow: 1;
            flex-shrink: 0;
            border: 1px solid #999;
            min-height: 300px;
            padding: 10px;
        }
        .box .item p{
            margin: 0px;
            padding: 4px;
            border: 1px solid #ccc;
        }
        .box .item p.active{
            background-color: indianred;
            color: white;
        }
        .box .item .title{
            text-align: center;
            color: #999;
            border-color: transparent;
        }
        .box .btn{
            width: 50px;
            padding: 0px 10px;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }
        .box .btn > input{
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <div class="item">
                <p  v-if="names.length==0"  class="title">暂无数据</p>
                <p :class="temp==n? 'active':''" v-for=" (n,i) in names " @click="getpush(n,i)" >{{ n }}</p>
            </div>
            <div class="btn">
                <input type="button" value=">"  @click="pushOne()">
                <input type="button" value="<"  @click="popOne()">
                <input type="button" value=">>" @click="pushAll()">
                <input type="button" value="<<" @click="popAll()">
            </div>
            <div class="item">
                <p  v-if="pushnames.length==0"  class="title">暂无数据</p>
                <p :class="pop==m? 'active':''" v-for="(m,j) in pushnames " @click="getpop(m,j)">{{ m }}</p>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                tempindex:null,
                temp:null,
                popindex:null,
                pop:null,
                names:[
                    "Kirk",
                    "Friedrich",
                    "Mazie",
                    "Kiana"
                ],
                pushnames:[

                ]
            },
            methods:{
                getpush(n,i){
                    this.tempindex=i;
                    this.temp=n;
                },
                pushOne(){
                    if(this.temp!=null){
                        this.pushnames.push(this.temp);
                        this.names.splice(this.tempindex,1);
                        this.tempindex=null;
                        this.temp=null;
                    }
                },
                getpop(m,j){
                    this.popindex=j;
                    this.pop=m;
                },
                popOne(){
                    if(this.pop!=null){
                        this.names.push(this.pop);
                        this.pushnames.splice(this.popindex,1);
                        this.popindex=null;
                        this.pop=null;
                    }
                },
                pushAll(){
                    for(var i=0;i<this.names.length;i++){
                        this.pushnames.push(this.names[i]);
                    };
                    this.names.length=0;
                },
                popAll(){
                    for(var i=0;i<this.pushnames.length;i++){
                        this.names.push(this.pushnames[i]);
                    };
                    this.pushnames.length=0;
                }

            }
        })
    </script>
</body>
</html>